<% use crate::utils::urls; %>
<turbo-frame id="notebooks">
  <div class="pb-5 position-relative">
    <div style="width: 526px;
        height: 433px; 
        max-width: 50vw; 
        position: absolute; 
        left: 50%;
        top: calc(50% - 216px);
        transform: translateX(-50%);
        border-radius: 752px;
        background: radial-gradient(46.38% 45.17% at 22.72% 36.90%, rgba(57, 210, 231, 0.60) 26.40%, rgba(174, 110, 255, 0.60) 100%);
        filter: blur(252.66856384277344px);">
    </div>
    <% if !notebooks.is_empty() { %>
    <div class="row gx-4 gy-4 position-relative">
      <% for notebook in notebooks { %>
      <div class="col-12 col-md-6 col-xxl-4">
        <div class="card h-100 interactive-card">
          <div class="card-body h-100">
            <div class="d-flex flex-column justify-content-between h-100 gap-4">
              <div>
                <h6 class="subcopy-text fw-semibold mb-0">
                  <%= notebook.name %>
                </h6>
                <small class="legal-text text-muted">Created by: <%= notebook.created_by() %></small>
              </div>

              <div>
                <small class="legal-text text-muted">Last modified <%= notebook.updated_at.month() as u32 %>/<%= notebook.updated_at.day() %>/<%= notebook.updated_at.year() %></small>
              </div>
          </div>
            <a href="<%- urls::deployment_notebook_by_id(notebook.id) %>" data-turbo-frame="_top" class="stretched-link">
            </a>
          </div>
        </div>
      </div>
      <% } %>
      <% if new { %>
      <div class="col-12 col-md-6 col-xxl-4">
        <div class="card h-100 interactive-card">
          <div class="card-body h-100 pt-2 pe-2">
            <div class="d-flex flex-column h-100">
              <div class="d-flex justify-content-end">
                <a href="<%- urls::deployment_notebooks_turboframe() %>" class="btn btn-close"></a>
              </div>
              <div class="d-flex flex-column justify-content-between flex-grow-1 gap-4">
                <div>
                  <form action="<%- urls::deployment_notebooks() %>" method="post" data-turbo-frame="_top">
                    <input class="subcopy-text form-control borderless" placeholder="Create a title" type="text" class="w-100" autofocus required name="name">
                  </form>
                  <small class="legal-text text-muted">Created by: User</small>
                </div>
                <script>
                  date = new Date();
                  document.getElementById("todays-date").innerHTML = date.toLocaleDateString();
                  delete date;
                </script>
                <small class="legal-text text-muted">Last modified <span id="todays-date">Today</span></small>
              </div>
            </div>
          </div>
        </div>
      </div>
      <% } %>
      <% if !new { %>
      <div class="col-12 col-md-6 col-xxl-4">
        <div class="h-100 position-relative">
          <a href="<%- urls::deployment_notebooks_turboframe() %>?new=true" class="stretched-link"></a>
          <div class="d-flex justify-content-center align-items-center h-100">
            <div class="d-flex align-content-center flex-column">
              <img height="48" width="auto" src="/dashboard/static/images/icons/new_notebook.svg" alt="New notebook">
              <button class="btn btn-tertiary"><span class="fs-5">+</span> Create New Notebook</button>
            </div>
          </div>
        </div>
      </div>
      <% } %>
    </div>
    <% } %>
  </div>
</turbo-frame>
